@mixin nav($color: #6f00ff) {
  .content {
    view-timeline-name: var(--s);
    view-timeline-inset: 80% 20%;
  }
  nav {
    position: fixed;
    top: 15px;
    right: 15px;
    background: #fff;
    padding: 10px 0;
    border-radius: 4px;
    overflow: hidden;
    a {
      position: relative;
      display: block;
      line-height: 2;
      padding: 0 15px;
      font-size: 14px;
      color: #191919;
      text-decoration: none;
      animation-name: active;
      animation-timeline: var(--s);
      border-left: 4px solid transparent;
      &:hover {
        background-color: #d5d5d54a;
      }
      @at-root {
        @keyframes active {
          0%,
          100% {
            color: $color;
            border-color: $color;
          }
        }
      }
    }
  }
}
